import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import LocationOn from "@material-ui/icons/LocationOn";
import Phone from "@material-ui/icons/Phone";
import { Card, List } from "antd";
import * as React from "react";
import { largeCardStyle } from "../../component/largeCard";
import { Hos } from "../../type/CommonData";
import { Link } from "react-router-dom";

const styles = (theme: Theme) =>
  createStyles({
    root: largeCardStyle,
    hosImage: {
      width: "8vw",
      height: "138px",
      borderRadius: "5px"
    },
    hosGrade: {
      fontSize: "4px",
      marginRight: "10px",
      backgroundColor: "rgb(254,244,215)",
      color: "rgb(254,144,9)",
      borderRadius: "5px",
      padding: "3px"
    },
    message: {
      marginTop: "15px"
    },
    messageTextStyle: {
      display: "flex",
      "& p": {
        flex: 1,
        overflow: "hidden",
        whiteSpace: "nowrap",
        textOverflow: "ellipsis"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  images: string;
  data: Hos[];
}

class HospitalList extends React.Component<Iprops> {
  public render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <Card
          title="医院列表"
          extra={
            <Link to={"/health-information"} style={{ fontSize: "10px" }}>
              更多>>
            </Link>
          }
          style={{ width: "100%" }}
          className={classes.root}
        >
          <List
            size="small"
            grid={{ gutter: 9, column: 3 }}
            dataSource={this.props.data}
            renderItem={(item: Hos) => (
              <List.Item>
                <Link to={{ pathname: "/detail-hospital", state:  item  }}>
                <Card hoverable={true} bordered={false}>
                  <Card.Meta
                    avatar={
                      <img
                        src={
                          item.detail &&
                          item.detail.images &&
                          item.detail.images[0] &&
                          item.detail.images[0].url
                            ? item.detail.images[0].url
                            : this.props.images
                        }
                        className={classes.hosImage}
                      />
                    }
                    title={<span title={item.name}>{item.name}</span>}
                    description={
                      <div style={{ height: "100%" }}>
                        <span className={classes.hosGrade}>{item.level}</span>
                        <span className={classes.hosGrade}>
                          {item.category}
                        </span>
                        <div className={classes.message}>
                          <div className={classes.messageTextStyle}>
                            <Phone
                              fontSize={"small"}
                              style={{ width: "15px" }}
                            />
                            <p
                              style={{ paddingLeft: "8px" }}
                              title={item.phone}
                            >
                              {item.phone}
                            </p>
                          </div>
                          <div className={classes.messageTextStyle}>
                            <LocationOn
                              fontSize={"small"}
                              style={{ width: "15px" }}
                            />
                            <p
                              style={{ paddingLeft: "8px" }}
                              title={item.location}
                            >
                              {item.location}
                            </p>
                          </div>
                        </div>
                      </div>
                    }
                  />
                </Card>
                </Link>
              </List.Item>
            )}
          />
        </Card>
      </div>
    );
  }
}

export default withStyles(styles)(HospitalList);
